<template>
  <div class="appointment-container">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <h2>预约理发</h2>
          <p class="subtitle">选择您喜欢的预约方式，系统已为您自动选择今日日期</p>
        </div>
      </template>

      <!-- 预约模式选择 -->
      <div class="mode-selector">
        <el-radio-group v-model="appointmentMode" @change="onModeChange" size="large">
          <el-radio-button label="by-date">
            <el-icon><Calendar /></el-icon>
            先选日期
          </el-radio-button>
          <el-radio-button label="by-manager">
            <el-icon><User /></el-icon>
            先选发型师
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- 按日期选择模式 -->
      <div v-if="appointmentMode === 'by-date'" class="date-first-mode">
        <div class="section">
          <h3 class="section-title">
            <el-icon><Calendar /></el-icon>
            选择预约日期
          </h3>
          <div class="date-picker-container">
            <el-date-picker
              v-model="selectedDate"
              type="date"
              placeholder="选择预约日期"
              :disabled-date="disabledDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="onDateSelect"
              class="date-picker"
              size="large"
            />
            <div class="date-tip">
              <el-icon><InfoFilled /></el-icon>
              已为您自动选择今日日期，您也可以选择其他日期
            </div>
          </div>
        </div>

        <div v-if="selectedDate && availableManagersByDate.length > 0" class="section">
          <h3 class="section-title">
            <el-icon><User /></el-icon>
            选择发型师 ({{ formatSelectedDate() }})
          </h3>
          <div class="manager-grid">
            <div 
              v-for="manager in availableManagersByDate" 
              :key="manager.storeManagerId"
              class="manager-card"
              :class="{ 'selected': selectedManagerId === manager.storeManagerId }"
              @click="selectManagerFromDate(manager)"
            >
              <div class="manager-info">
                <div class="manager-avatar">
                  <el-avatar 
                    :size="60" 
                    :src="manager.avatar" 
                    :alt="manager.storeManagerName"
                  >
                    {{ manager.storeManagerName.charAt(0) }}
                  </el-avatar>
                </div>
                <div class="manager-details">
                  <h4>{{ manager.storeManagerName }}</h4>
                  <p class="description">{{ manager.description }}</p>
                  <el-tag size="small" type="success">
                    可预约 {{ manager.totalSchedules }} 个时间段
                  </el-tag>
                </div>
              </div>
              
              <!-- 显示当日可用时间段 -->
              <div class="available-hours">
                <div class="hours-title">可选时间段：</div>
                <div class="hours-list">
                  <div 
                    v-for="slot in getManagerTimeSlots(manager)" 
                    :key="slot.hour"
                    class="hour-tag"
                    :class="{ 
                      'selected': selectedManagerId === manager.storeManagerId && selectedHour === slot.hour,
                      'disabled': !slot.available
                    }"
                    @click.stop="selectDateTimeFromManager(manager, slot)"
                  >
                    <div class="time-text">{{ slot.timeRange }}</div>
                    <div class="remaining-slots" :class="{ 'full': slot.remainingSlots === 0 }">
                      剩余{{ slot.remainingSlots }}个名额
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else-if="selectedDate && loadingManagersByDate" class="loading-section">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>正在加载可用发型师...</span>
        </div>

        <div v-else-if="selectedDate && availableManagersByDate.length === 0" class="empty-section">
          <el-empty description="该日期暂无可用发型师">
            <el-button type="primary" @click="selectAnotherDate">选择其他日期</el-button>
          </el-empty>
        </div>
      </div>

      <!-- 按发型师选择模式 -->
      <div v-if="appointmentMode === 'by-manager'" class="manager-first-mode">
        <div class="section">
          <h3 class="section-title">
            <el-icon><User /></el-icon>
            选择发型师
          </h3>
          <div class="manager-grid">
            <div 
              v-for="manager in allStoreManagers" 
              :key="manager.storeManagerId"
              class="manager-card"
              :class="{ 'selected': selectedManagerId === manager.storeManagerId }"
              @click="selectManagerForDates(manager)"
            >
              <div class="manager-info">
                <div class="manager-avatar">
                  <el-avatar 
                    :size="60" 
                    :src="manager.avatar" 
                    :alt="manager.storeManagerName"
                  >
                    {{ manager.storeManagerName.charAt(0) }}
                  </el-avatar>
                </div>
                <div class="manager-details">
                  <h4>{{ manager.storeManagerName }}</h4>
                  <p class="description">{{ manager.description }}</p>
                  <el-tag size="small" type="info">
                    共 {{ manager.totalSchedules }} 个时间段
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="selectedManagerId && Object.keys(managerAvailableDates).length > 0" class="section">
          <h3 class="section-title">
            <el-icon><Clock /></el-icon>
            选择预约日期和时间
          </h3>
          <div class="date-schedule-grid">
            <div 
              v-for="(hours, date) in managerAvailableDates" 
              :key="date"
              class="date-card"
              :class="{ 'today': isToday(date) }"
            >
              <div class="date-header">
                <span class="date-text">{{ formatDate(date) }}</span>
                <span class="weekday">{{ getWeekday(date) }}</span>
                <el-tag v-if="isToday(date)" size="small" type="warning">今天</el-tag>
              </div>
              <div class="time-slots">
                <div 
                  v-for="slot in getDateTimeSlots(date, hours)" 
                  :key="slot.hour"
                  class="time-slot"
                  :class="{ 
                    'selected': selectedDate === date && selectedHour === slot.hour,
                    'disabled': !slot.available
                  }"
                  @click="selectDateTimeSlot(date, slot)"
                >
                  <div class="time-text">{{ slot.timeRange }}</div>
                  <div class="remaining-slots" :class="{ 'full': slot.remainingSlots === 0 }">
                    剩余{{ slot.remainingSlots }}个名额
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else-if="selectedManagerId && loadingManagerDates" class="loading-section">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>正在加载可用日期...</span>
        </div>

        <div v-else-if="selectedManagerId && Object.keys(managerAvailableDates).length === 0" class="empty-section">
          <el-empty description="该发型师近期暂无可用时间">
            <el-button type="primary" @click="selectAnotherManager">选择其他发型师</el-button>
          </el-empty>
        </div>
      </div>

      <!-- 预约信息填写 -->
      <div v-if="selectedManagerId && selectedDate && selectedHour" class="appointment-form">
        <h3 class="section-title">
          <el-icon><Edit /></el-icon>
          填写预约信息
        </h3>
        <el-form 
          ref="appointmentFormRef" 
          :model="appointmentForm" 
          :rules="appointmentRules" 
          label-width="100px"
          class="form-content"
          size="large"
        >
          <el-form-item label="发型师">
            <el-input :value="getSelectedManagerName()" readonly>
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="预约时间">
            <el-input :value="`${formatSelectedDate()} ${selectedHour}:00-${selectedHour + 1}:00`" readonly>
              <template #prefix>
                <el-icon><Clock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="选择套餐" prop="packageId">
            <el-select v-model="appointmentForm.packageId" placeholder="选择套餐" style="width: 100%">
              <template #prefix>
                <el-icon><ShoppingBag /></el-icon>
              </template>
              <el-option 
                v-for="pkg in availablePackages" 
                :key="pkg.id" 
                :label="`${pkg.packageName} - ¥${pkg.packagePrice}`" 
                :value="pkg.id"
              >
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <span>{{ pkg.packageName }}</span>
                  <span style="color: #f56c6c; font-weight: bold;">¥{{ pkg.packagePrice }}</span>
                </div>
                <div style="font-size: 12px; color: #999; margin-top: 2px;">
                  {{ pkg.packageDescription }}
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="备注">
            <el-input 
              v-model="appointmentForm.remark" 
              type="textarea" 
              :rows="3"
              placeholder="请输入备注信息（可选）"
            >
              <template #prefix>
                <el-icon><ChatDotRound /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitAppointment" :loading="submitting" size="large">
              <el-icon><Check /></el-icon>
              确认预约
            </el-button>
            <el-button @click="resetForm" size="large">
              <el-icon><Refresh /></el-icon>
              重新选择
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 空状态 -->
      <el-empty v-if="allStoreManagers.length === 0" description="暂无可预约的理发师">
        <el-button type="primary" @click="loadAllStoreManagers">刷新数据</el-button>
      </el-empty>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Loading, Calendar, User, InfoFilled, Clock, Edit, ShoppingBag, ChatDotRound, Check, Refresh } from '@element-plus/icons-vue'
import { 
  getAllStoreManagerSchedules, 
  createAppointment, 
  getAvailableStoreManagersByDate,
  getStoreManagerAvailableDates,
  getStoreManagerTimeSlotAvailability
} from '@/api/appointment'
import { getAllEnabledHaircutPackages } from '@/api/haircutPackage'

// 响应式数据
const appointmentMode = ref('by-date') // 预约模式：by-date 或 by-manager
const allStoreManagers = ref([]) // 所有发型师
const availableManagersByDate = ref([]) // 按日期筛选的可用发型师
const managerAvailableDates = ref({}) // 发型师的可用日期
const availablePackages = ref([]) // 可用套餐列表
const timeSlotAvailability = ref({}) // 时间段可用性信息 {managerId_date: [slots]}

const selectedDate = ref('') // 选择的日期
const selectedManagerId = ref(null) // 选择的发型师ID
const selectedHour = ref(null) // 选择的小时

const loadingManagersByDate = ref(false) // 加载按日期筛选的发型师
const loadingManagerDates = ref(false) // 加载发型师可用日期
const submitting = ref(false) // 提交预约

// 预约表单
const appointmentForm = reactive({
  storeManagerId: null,
  appointmentDate: '',
  appointmentHour: null,
  packageId: null,
  remark: ''
})

// 表单验证规则
const appointmentRules = {
  packageId: [{ required: true, message: '请选择套餐', trigger: 'change' }]
}

// 表单引用
const appointmentFormRef = ref()

// 星期几名称
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

// 页面加载时获取数据
onMounted(() => {
  loadAllStoreManagers()
  loadAvailablePackages()
  // 自动选择当天日期
  autoSelectTodayDate()
})

// 加载所有发型师数据
const loadAllStoreManagers = async () => {
  try {
    const response = await getAllStoreManagerSchedules()
    if (response.code === 200) {
      allStoreManagers.value = response.data
    } else {
      ElMessage.error(response.message || '获取发型师数据失败')
    }
  } catch (error) {
    console.error('获取发型师数据失败:', error)
    ElMessage.error('获取发型师数据失败')
  }
}

// 加载可用套餐数据
const loadAvailablePackages = async () => {
  try {
    const response = await getAllEnabledHaircutPackages()
    if (response.code === 200) {
      availablePackages.value = response.data || []
    } else {
      ElMessage.error(response.message || '获取套餐数据失败')
    }
  } catch (error) {
    console.error('获取套餐数据失败:', error)
    ElMessage.error('获取套餐数据失败')
  }
}

// 预约模式改变
const onModeChange = (mode) => {
  resetForm()
  // 如果切换到按日期模式，自动选择当天日期
  if (mode === 'by-date') {
    autoSelectTodayDate()
  }
}

// 日期选择（按日期模式）
const onDateSelect = async (date) => {
  if (!date) return
  
  selectedDate.value = date
  selectedManagerId.value = null
  selectedHour.value = null
  availableManagersByDate.value = []
  
  loadingManagersByDate.value = true
  
  try {
    const response = await getAvailableStoreManagersByDate(date)
    if (response.code === 200) {
      availableManagersByDate.value = response.data || []
      
      // 为每个发型师加载时间段可用性信息
      for (const manager of availableManagersByDate.value) {
        await loadTimeSlotAvailability(manager.storeManagerId, date)
      }
    } else {
      ElMessage.error(response.message || '获取可用发型师失败')
    }
  } catch (error) {
    console.error('获取可用发型师失败:', error)
    ElMessage.error('获取可用发型师失败')
  } finally {
    loadingManagersByDate.value = false
  }
}

// 从日期模式选择发型师
const selectManagerFromDate = (manager) => {
  selectedManagerId.value = manager.storeManagerId
  selectedHour.value = null // 重置时间选择
}

// 从日期模式选择发型师和时间
const selectDateTimeFromManager = (manager, slot) => {
  if (!slot.available) {
    ElMessage.warning('该时间段已满，请选择其他时间')
    return
  }
  selectedManagerId.value = manager.storeManagerId
  selectedHour.value = slot.hour
}

// 从发型师模式选择发型师
const selectManagerForDates = async (manager) => {
  selectedManagerId.value = manager.storeManagerId
  selectedDate.value = ''
  selectedHour.value = null
  managerAvailableDates.value = {}
  
  loadingManagerDates.value = true
  
  try {
    const response = await getStoreManagerAvailableDates(manager.storeManagerId, 14) // 查询14天
    if (response.code === 200) {
      managerAvailableDates.value = response.data || {}
      
      // 为每个日期加载时间段可用性信息
      for (const date of Object.keys(managerAvailableDates.value)) {
        await loadTimeSlotAvailability(manager.storeManagerId, date)
      }
    } else {
      ElMessage.error(response.message || '获取可用日期失败')
    }
  } catch (error) {
    console.error('获取可用日期失败:', error)
    ElMessage.error('获取可用日期失败')
  } finally {
    loadingManagerDates.value = false
  }
}

// 选择日期和时间（发型师模式）
const selectDateTime = (date, hour) => {
  selectedDate.value = date
  selectedHour.value = hour
}

// 选择日期和时间段（发型师模式）
const selectDateTimeSlot = (date, slot) => {
  if (!slot.available) {
    ElMessage.warning('该时间段已满，请选择其他时间')
    return
  }
  selectedDate.value = date
  selectedHour.value = slot.hour
}

// 获取发型师当日排班
const getManagerDaySchedules = (manager) => {
  if (!manager.weeklySchedule || !Array.isArray(manager.weeklySchedule)) {
    return []
  }
  
  const date = new Date(selectedDate.value)
  const dayOfWeek = date.getDay() === 0 ? 6 : date.getDay() - 1 // 转换为0=周一的索引
  
  return manager.weeklySchedule[dayOfWeek] || []
}

// 获取发型师时间段可用性信息
const getManagerTimeSlots = (manager) => {
  const key = `${manager.storeManagerId}_${selectedDate.value}`
  return timeSlotAvailability.value[key] || []
}

// 获取日期时间段可用性信息
const getDateTimeSlots = (date, hours) => {
  const key = `${selectedManagerId.value}_${date}`
  const slots = timeSlotAvailability.value[key] || []
  
  // 直接返回所有时段，不需要按小时筛选，因为现在返回的是完整时段
  return slots
}

// 加载时间段可用性信息
const loadTimeSlotAvailability = async (managerId, date) => {
  try {
    const key = `${managerId}_${date}`
    if (timeSlotAvailability.value[key]) {
      return // 已经加载过了
    }
    
    const response = await getStoreManagerTimeSlotAvailability(managerId, date)
    if (response.code === 200) {
      timeSlotAvailability.value[key] = response.data || []
    }
  } catch (error) {
    console.error('获取时间段可用性失败:', error)
  }
}

// 获取选中发型师的名称
const getSelectedManagerName = () => {
  if (appointmentMode.value === 'by-date') {
    const manager = availableManagersByDate.value.find(m => m.storeManagerId === selectedManagerId.value)
    return manager ? manager.storeManagerName : ''
  } else {
    const manager = allStoreManagers.value.find(m => m.storeManagerId === selectedManagerId.value)
    return manager ? manager.storeManagerName : ''
  }
}

// 格式化日期显示
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${month}月${day}日`
}

// 获取星期几
const getWeekday = (dateStr) => {
  const date = new Date(dateStr)
  return weekdays[date.getDay()]
}

// 禁用日期（只能选择今天及以后的日期）
const disabledDate = (time) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return time.getTime() < today.getTime()
}

// 重置表单
const resetForm = () => {
  selectedDate.value = ''
  selectedManagerId.value = null
  selectedHour.value = null
  availableManagersByDate.value = []
  managerAvailableDates.value = {}
  
  Object.assign(appointmentForm, {
    storeManagerId: null,
    appointmentDate: '',
    appointmentHour: null,
    packageId: null,
    remark: ''
  })
  appointmentFormRef.value?.clearValidate()
}

// 提交预约
const submitAppointment = async () => {
  try {
    await appointmentFormRef.value.validate()
    
    // 设置预约表单数据
    appointmentForm.storeManagerId = selectedManagerId.value
    appointmentForm.appointmentDate = selectedDate.value
    appointmentForm.appointmentHour = selectedHour.value
    
    submitting.value = true
    const response = await createAppointment(appointmentForm)
    if (response.code === 200) {
      ElMessage.success('预约成功')
      resetForm()
    } else {
      ElMessage.error(response.message || '预约失败')
    }
  } catch (error) {
    console.error('预约失败:', error)
    ElMessage.error('预约失败')
  } finally {
    submitting.value = false
  }
}

// 自动选择当天日期
const autoSelectTodayDate = () => {
  const today = new Date()
  const todayStr = today.getFullYear() + '-' + 
    String(today.getMonth() + 1).padStart(2, '0') + '-' + 
    String(today.getDate()).padStart(2, '0')
  
  selectedDate.value = todayStr
  
  // 如果是按日期模式，自动加载当天的发型师
  if (appointmentMode.value === 'by-date') {
    onDateSelect(todayStr)
  }
}

// 格式化选择的日期
const formatSelectedDate = () => {
  if (selectedDate.value) {
    return formatDate(selectedDate.value)
  }
  return '选择日期'
}

// 检查日期是否为今天
const isToday = (dateStr) => {
  const today = new Date()
  const date = new Date(dateStr)
  return date.toDateString() === today.toDateString()
}

// 选择另一个日期
const selectAnotherDate = () => {
  resetForm()
  autoSelectTodayDate()
}

// 选择另一个发型师
const selectAnotherManager = () => {
  resetForm()
  autoSelectTodayDate()
}
</script>

<style scoped>
.appointment-container {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.page-card {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  text-align: center;
  padding: 20px 0;
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  color: white;
  margin: -20px -20px 20px -20px;
}

.card-header h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
}

.subtitle {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.mode-selector {
  text-align: center;
  margin: 30px 0;
}

.mode-selector .el-radio-group {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 8px;
}

.mode-selector .el-radio-button__inner {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s;
}

.section {
  margin-bottom: 40px;
}

.section-title {
  margin: 0 0 24px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 3px solid #409eff;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title .el-icon {
  color: #409eff;
  font-size: 22px;
}

.date-picker-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.date-picker {
  width: 300px;
}

.date-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
  background: #f0f9ff;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.manager-card {
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  padding: 24px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.manager-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409eff, #36cfc9);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.manager-card:hover {
  border-color: #409eff;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.manager-card:hover::before {
  transform: scaleX(1);
}

.manager-card.selected {
  border-color: #409eff;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.2);
}

.manager-card.selected::before {
  transform: scaleX(1);
}

.manager-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.manager-avatar {
  margin-right: 16px;
}

.manager-avatar .el-avatar {
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.manager-details h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.description {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
}

.available-hours {
  margin-top: 16px;
}

.hours-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  font-weight: 500;
}

.hours-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hour-tag {
  background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
  color: #409eff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  border: 2px solid #b3d8ff;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  min-width: 110px;
  position: relative;
  overflow: hidden;
}

.hour-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.hour-tag:hover:not(.disabled) {
  background: linear-gradient(135deg, #d9ecff 0%, #b3d8ff 100%);
  border-color: #79bbff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.hour-tag:hover:not(.disabled)::before {
  left: 100%;
}

.hour-tag.selected {
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  color: #fff;
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.hour-tag.disabled {
  background: #f5f7fa;
  color: #c0c4cc;
  border-color: #e4e7ed;
  cursor: not-allowed;
  opacity: 0.6;
}

.hour-tag .time-text {
  font-weight: 600;
  margin-bottom: 2px;
}

.hour-tag .remaining-slots {
  font-size: 10px;
  opacity: 0.9;
}

.hour-tag .remaining-slots.full {
  color: #f56c6c;
  font-weight: 600;
}

.date-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.date-card {
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.date-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409eff, #36cfc9);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.date-card:hover {
  border-color: #409eff;
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.1);
}

.date-card:hover::before {
  transform: scaleX(1);
}

.date-card.today {
  border-color: #f56c6c;
  background: linear-gradient(135deg, #fff2f0 0%, #ffebe6 100%);
}

.date-card.today::before {
  background: linear-gradient(90deg, #f56c6c, #ff9c6e);
  transform: scaleX(1);
}

.date-header {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-text {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.weekday {
  font-size: 12px;
  color: #909399;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.time-slot {
  padding: 10px 12px;
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fff;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}

.time-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.time-slot:hover:not(.disabled) {
  border-color: #409eff;
  background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.time-slot:hover:not(.disabled)::before {
  left: 100%;
}

.time-slot.selected {
  border-color: #409eff;
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.time-slot.disabled {
  background: #f5f7fa;
  color: #c0c4cc;
  border-color: #e4e7ed;
  cursor: not-allowed;
  opacity: 0.6;
}

.time-slot .time-text {
  font-weight: 600;
  margin-bottom: 2px;
}

.time-slot .remaining-slots {
  font-size: 10px;
  opacity: 0.9;
}

.time-slot .remaining-slots.full {
  color: #f56c6c;
  font-weight: 600;
}

.loading-section,
.empty-section {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.loading-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 16px;
}

.loading-section .el-icon {
  font-size: 24px;
  color: #409eff;
}

.appointment-form {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 2px solid #e4e7ed;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 40px;
}

.form-content {
  max-width: 600px;
}

.form-content .el-form-item__label {
  font-weight: 600;
  color: #303133;
}

.form-content .el-input__inner,
.form-content .el-textarea__inner {
  border-radius: 8px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s;
}

.form-content .el-input__inner:focus,
.form-content .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.form-content .el-button {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s;
}

.form-content .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  border: none;
}

.form-content .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #5cdbd3 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .appointment-container {
    padding: 12px;
  }
  
  .manager-grid {
    grid-template-columns: 1fr;
  }
  
  .manager-info {
    flex-direction: column;
    text-align: center;
  }
  
  .manager-avatar {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .date-schedule-grid {
    grid-template-columns: 1fr;
  }
  
  .time-slots {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .time-slot {
    padding: 8px 6px;
    font-size: 11px;
  }
  
  .date-picker {
    width: 100%;
  }
  
  .date-picker-container {
    align-items: stretch;
  }
  
  .hours-list {
    justify-content: center;
  }
  
  .appointment-form {
    padding: 20px;
  }
  
  .card-header {
    padding: 16px 0;
  }
  
  .card-header h2 {
    font-size: 24px;
  }
  
  .subtitle {
    font-size: 14px;
  }
}
</style> 